<style scoped>
  .content .w980{
    padding-top: 0;
  }
  .fr div.list-tips.breadcrumb{
    margin-bottom: 0;
  }
  .nav-path{
    position: relative;
  }
  .nav-path ol{
    width: 100%;
    height: 36px;
  }
  .nav-path button.add-hsp-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  .nav-path ol li a{
    color: #444;
  }
  .nav-path ol li:last-child{
    color: #00CB8F;
  }
  .nav-path ol li.li-last{
    color: #00CB8F;
  }

  /*返回上一级*/
  .return-prev{
    color: #0DC78A;
    text-decoration: none;
    float: right;
  }
  /*机构列表*/
  .list-tips{
    padding: 0;
    height: 36px;
    line-height: 36px;
    background: #F5F5F4  url(../../assets/img/list_tips.png) no-repeat 20px center;
    background-size: 4px 20px;
  }
  .list-tips span{
    float: left;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    margin-left: 36px;
    text-align: left;
  }
  .list-tips span.default-span{
    color: #6C6C6C;
    font-size: 14px;
    padding: 0 15px;
    cursor: pointer;
  }
  .list-tips span.active-span{
    color: #fff;
    background-color: #00C484;
  }
  .list-tips button.close span{
    font-size: 18px;
    margin: 2px 10px 0 0;
    text-align: left;
  }
  .org-list .list-tips button{
    float: right;
    width: 118px;
    height: 36px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    background-color: #00A9FD;
    font-size: 16px;
    line-height: 36px;
    margin-right: 20px;
    /*margin-top: calc(50%-0.18rem);*/
    margin-top: 6px;
    outline: none;
  }
  .org-list .list-opera .form-inline label{
    margin: 0 10px 0 23px;
    font-size: 12px;
    color: #666460;
    font-weight: 400;
  }
  .org-list .list-opera .form-inline button{
    width: 98px;
    height: 32px;
    display: inline-block;
    border-radius: 16px;
  }
  .list-opera{
    margin: 10px 0 20px 0;
  }
  .list-opera .form-inline .clear-research{
    margin-left: 15px;
    height: 32px;
  }
  .list-content table th {
      text-align: center;
      line-height: 36px;
      height: 36px;
      font-weight: normal;
      background-color: #F8F8F7;
  }
  .list-content table tr:nth-child(odd){
    background-color: #fff;
  }
  .list-content table tr:nth-child(even){
    background-color: #F6FBF8;
  }
  .list-content table td {
      line-height: 40px;
      text-align: center;
  }
  .list-content table tr td:nth-child(1) {
      color: #333
  }
  .list-content table tr td:nth-child(2),.list-content table tr td:nth-child(3) {
      color: #333
  }
  .list-content table tr td a.glyphicon{
    display: inline-block;
    padding: 0 0 0 20px;
    height: 16px;
    font-size: 12px;
    text-align: right;
    margin-right: 5px;
    text-decoration: none;
    color: #444;
    background-repeat: no-repeat!important;
    background-position: left center!important;
  }
  .list-content table tr td a:first-child{
    background: url(../../assets/img/edit.png);
    background-size: 14px;
  }
  .list-content table tr td .glyphicon:hover {
      color: #1dc499;
      cursor: pointer;
  }
  .list-content table tr td a:nth-child(1){
    background: url(../../assets/img/edit.png);
    background-size: 17px 12px;
  }
  .list-content table tr td a:nth-child(2){
    background: url(../../assets/img/dele4.png);
    background-size: 14px;
  }

  /*模态框基本设置*/
  .modal-dialog .breadcrumb{
    margin-bottom: 0;
  }
  #add-org-cover .modal-body{
    height: 500px;
    overflow: auto;
    padding: 0 15px;
  }
  /*模态框*/
  .modal-dialog{
    width: 70%;
    height: 600px;
    border-top: 0;
  }
  .modal-body .form-group{
    display: block;
    margin-bottom: 18px;
    margin-top: 18px;
  }
  .modal-body .increase-team-per select,.modal-body .increase-team-per input{
    width: 60%;
    display: inline-block;
  }
  .modal-body .form-group-foot{
    text-align: center;
  }
  .modal-body .form-group label{
    width: 27%;
    text-align: right;
  }
  .modal-body .form-inline .form-control{
    width: 48%;
    text-align: left;
    text-indent: 10px;
    margin-left: 30px;
  }

  .modal-body .list-tips .team-label{
    float: left;
    height: 36px;
    line-height: 36px;
  }
  .modal-body .list-tips .new-per{
    float: right;
    height: 36px;
    line-height: 36px;
    color: #1AA9FD;
    margin-right: 46px;
    background: none;
  }
  

  /*信息填写不完整提示框*/
  .msg-without-complete .modal-dialog{
      width: 100%;
    height: 100%;
  }
  .msg-without-complete .modal-content{
    width: 50%;
    text-align: center;
    font-size: 16px;
    color: #37B06C;
    line-height: 100px;
    margin: 0 auto;
    top: 50%;
    -left: 50%;
    margin-top: -50px;
  }

  /*删除提示*/
  #delCoverTips .modal-dialog .modal-content{
    width: 90%;
    margin: 0 auto;
  }
  .del-tips{
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
  }
  .del-tips span{
    color: #f00;
    padding: 0 3px;
  }
  .modal-footer{
    text-align: center;
    padding: 0;
  }
  .modal-footer .form-group.clear-margin-bot{
    margin-bottom: 0;
  }
  .modal-footer .btn{
    outline: none;
  }
  .modal-footer .btn.btn-primary{
    background-color: #00C782;
  }
  .modal-footer .btn-opera .form-group{
    text-align: center;
  }

  /*编辑服务项目*/
  .form-group{
    display: block;
    margin-bottom: 18px;
  }
  .form-group label{
    text-align: right;
  }
  .exp-mark{
    color: red;
    height: 100%;
    line-height: 100%;
    font-size: 14px;
    margin-right: 5px;
    display: inline-block;
  }
  
  span.error{
    color: #f00;
  }

  .form-group select{
    appearance:none;
    -moz-appearance:none;/*?Firefox?*/
    -webkit-appearance:none;/*?Safari?和?Chrome?*/
    background: url(../../assets/img/select_bg.png) no-repeat 95% center;
    background-size: 11px 6px;
  }

  /*信息填写不完整提示框*/
  .msg-without-complete{
    -z-index: 10200;
  }
  .msg-without-complete .modal-content{
    width: 50%;
    text-align: center;
    font-size: 16px;
    color: orangered;
    line-height: 100px;
    margin: 0 auto;
    top: 50%;
    -left: 50%;
    margin-top: -50px;
  }

  /*模态提示*/
  #delCoverTips .modal-dialog{
    width: 48%;
    margin: 0 auto;
  }

  /*删除服务提示*/
  .del-tips{
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
  }
  .del-tips span{
    color: #f00;
    padding: 0 3px;
  }
  .start {
    font-size: 14px;
    color: red;
    display: inline-block;
    height: 34px;
    line-height: 34px;
  }
  .imgmodal{
    padding-left: 50%;
    margin-left: -200px;
    height: 250px;
    overflow: hidden;
  }
  .img-tips{
    position: absolute;
    right: 0;
    top: 30%;
    font-size: 14px;
  }
  .del-cover{
    padding: 15px 0;
  }

  /*二维码*/
  #extend-property .modal-dialog{
    width: 60%;
  }
    /*表单设置*/
  #extend-property .form-group button{
    width: 136px;
    height: 36px;
  }

  #extend-property .form-group label{
    display: inline-block;
    height: 34px;
    line-height: 34px;
  }

  #extend-property .form-group .form-control,#extend-property .form-group .validation-flag{
    width: 48%;
    display: inline-block;
  } 

  #extend-property .form-group .validation-flag{
    height: 34px;
  }

  #extend-property .form-group .validation-flag label{
    width: auto;
    float: left;
    padding-right: 5px;
  }

  #extend-property .form-group .validation-flag input{
    width: 18px;
    height: 18px;
    margin: 8px 4px;
  }

  #extend-property .form-group .validation-flag .flag-is,#extend-property .form-group .validation-flag .flag-or{
    display: inline-block;
    width: 20%; 
    height: 34px;
  } 

  #extend-property .form-group .validation-flag .flag-or{
    margin-left: 30px;
  } 

  #extend-property .form-group .vertical-top{
    vertical-align: top;
  }

  #extend-property .modal-footer .form-group{
    text-align: center;
  }
</style>

<template>
    <div class="index clearafter">
        <!-- 头部组件 -->
        <header-component></header-component>
        <div class="content cbafter">
        <!-- 侧部导航组件 -->
        <div class="w220 fl">
            <aside-component></aside-component>
        </div>
        <!-- 右部内容区 -->
        <div class="w980 fr">
          <!-- 路径导航 -->
            <nav class="nav-path">
                <ol class="breadcrumb">
                  <li>系统配置</li>
                  <li>租户维护</li>
                  <li>租户信息</li>
                  <li class="li-last">扩展属性</li>
                  <a href="#" class="return-prev" onclick="javascript:history.back(-1);">返回上一级</a>
                </ol>
            </nav>
            <div class="list-tips breadcrumb">
              <span>租户列表</span>
              <button class="fr default ok add-hsp-btn" @click="addExtendProperty"> + 添加扩展属性</button>
            </div>
            <!-- 列表内容 -->
            <div class="list-content">
              <table class="table table-striped">
                <table class="table table-hover">
                      <thead>
                          <tr>
                              <th class="col-md-2">属性</th>
                              <th class="col-md-2">属性值</th>
                              <th class="col-md-2">有效标识</th>
                              <th class="col-md-2">最后修改人</th>
                              <th class="col-md-2">最后修改时间</th>
                              <th class="col-md-2">操作</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr v-for="($index,lists) in serverData">
                              <td>{{$index+1}}</td>
                              <td>{{lists.tenantId}}</td>
                              <td>{{lists.tenantType | convertTenatType}}</td>
                              <td>{{lists.tenantName}}</td>
                              <td>{{lists.tenantName}}</td>
                              <td>
                                <a class="glyphicon" @click="watchAndEditEvent(lists)">编辑</a>
                                <a class="glyphicon" @click="deleteTenatEvent(lists)">删除</a>
                              </td>
                          </tr>
                          <tr class="no-data" v-if="isData">
                            <td colspan="6">暂无查询记录</td>
                          </tr>
                      </tbody>
                  </table>
              </table>   
            </div>
            <!-- 分页 -->
            <bootpage-component v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :param="param" :headersparam="headersparam"></bootpage-component>
          </div>

          <!--添加/查看扩展属性-->
          <div id="extend-property" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <div class="list-tips breadcrumb">
                  <span class="default-span">添加租户服务扩展属性</span>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                </div>
              </div>
              <div class="modal-body cbafter">
                  <div class="form-group">
                      <label for="exampleInputName2">属性代码:</label>
                      <select name="orgLevel" id="hospital-rank" class="form-control roles-type">
                         <option value="请选择属性代码"></option>
                      </select>
                  </div>
                  <div class="form-group">
                      <label for="exampleInputName2">属性类型:</label>
                      <select name="orgLevel" id="hospital-rank" class="form-control roles-type">
                         <option value="数字"></option>
                      </select>
                  </div>
                  <div class="form-group">
                     <label for="exampleInputName2">属性值:</label>
                     <input name="orgAddress" type="text" class="form-control" id="address" placeholder="请输入属性值" />
                 </div>
                 <div class="form-group">
                     <label for="exampleInputName2" class="vertical-top">有效标识:</label>
                     <div class="validation-flag">
                         <div class="flag-is">
                             <label for="flag-is">是</label>
                             <input type="radio" name="flag" id="flag-is" class="form-control" />
                         </div>
                         <div class="flag-or">
                             <label for="flag-or">否</label>
                             <input type="radio" name="flag" id="flag-or" class="form-control" />
                         </div>
                     </div>
                 </div>
              </div>
              <div class="modal-footer">
                  <div class="form-group clear-margin-bot del-cover">
                      <button type="button" class="save-btn">保存</button>
                      <button type="button" class="cancel-btn" data-dismiss="modal">取消</button>
                  </div>
              </div>
            </div>
          </div>
          </div>

          <!-- 信息填写不完整 -->
          <div class="modal fade msg-without-complete" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
              <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                  {{subErrorMsg}}
              </div>
              </div>
          </div><!--msg-not-complete-->

          <!-- 删除提示 -->
          <div id="delCoverTips" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">机构删除</h4>
                </div>
                <div class="modal-body">
                  <p class="del-tips">您确定要删除此"<span v-text="delTenatName"></span>"租户吗？</p>
                </div>
                <div class="modal-footer">
                  <div class="form-group clear-margin-bot del-cover">
                    <button type="button" class="save-btn" @click.stop.prevent="confirmDeleteOrg">确认</button>
                    <button type="button" class="cancel-btn" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal --> 
        </div><!-- 内容区 -->
        </div>
    </div>
</template>
 
<script>
  import 'assets/reset.css';
  import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js';

  import Header from 'components/module-head.vue';
  import Asider from 'components/menu-list.vue';
  import footerPage from 'components/BootPage.vue';
  import areaPlugin from 'components/area-comp-org.vue';
  import ImgUploadBtn from 'components/ImgUploadBtn.vue'
  import Public from 'assets/public.js'

  export default {
    data () {
      return {
        headersparam: {
            'X-Service-Id': 'base.sysOrgTenantService',
            'X-Service-Method': 'queryOrgTenant'
        },
        param: {
            pageNo: 1,
            pageSize: 10
        },
                
        //获取地区返回的文件树数据
        getAreaTreeData: [],
        //信息填写不完整--删除失败
        subErrorMsg: '',
        serverData: {},

        //点击'添加'?'查看'
        addOperaEvent: false,
        watchEditOpera: false,
        //编辑？保存
        nowEditShow: true,
        nowSaveShow: false,
        //是否可以编辑
        disabledIsShow: 'disabled',

        //要删除的租户名称-id
        delTenatName: '',
        tenantId: '',

        //是否有记录
        isData: false
      }
    },
    events: {
      'data': function(datas){
        this.serverData = datas;
      }
    },
    watch: {
      'serverData': 'isWatchServerData'
    },
    filters: {
      //转换租户类型
      'convertTenatType': function(tp){
        switch(tp){
          case '01': 
            return '集团化医院';
          case '02' :
            return '医疗中心';
          case '03' :
            return '城市级医联';
          case '04' :
            return '互联网医联';
          default :
            return '未说明';
        }
      }
    },
    ready () {  
      var that = this;
      this.isData = (this.serverData.length == '' || null || 'undefined') ? true:false;
    },
    components: {
      //头部组件
      'header-component': Header,
      //侧部导航组件
      'aside-component': Asider,
      'bootpage-component': footerPage,
      'area-component': areaPlugin,
      'imgid-btn': ImgUploadBtn
    },
    methods: {
      //监听数据变化显示是否有记录
      isWatchServerData: function(){
        if(this.serverData.length == '' || this.serverData.length == null || this.serverData.length == 'undefined'){
          this.isData = true;
        }else{
          this.isData = false;
        };
      },

      //添加扩展属性
      addExtendProperty () {
        $('#extend-property').modal('show');
      },

      //删除扩展属性
      deleteTenatEvent (lists) {
        this.delTenatName = lists.tenantName;
        this.tenantId = lists.tenantId;
        $('#delCoverTips').modal('show');
      },

      //确认--删除扩展属性
      confirmDeleteOrg () {
        var that = this;
        $.when(Public.commonajax('base.sysOgTenantService','deleteOrgcloud','["'+this.tenantId+'"]')).done(function(res){
            if(res.code == 200){
              that.$refs.page.refresh();
              $('#delCoverTips').modal('hide');
            }else{
              that.subErrorMsg = res.msg;
              $('#delCoverTips').modal('show');
            };
        });
        setTimeout(function(){$('#delCoverTips').modal('hide');},1800);
      },

      showMess:function(){
        $('.msg-without-complete').modal('show');
      },

      //表单验证
      validationForm: function(){
            $('.msg-without-complete').modal('hide');
            return true;  
      }
    }//methods
  }



</script>
